<!-- 钢板统计 -->
<template>
  <div class="chart-container">
    <div ref="chartRef" class="chart" />
  </div>
</template>
    <script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";

const chartRef = ref(null);
let chart = null;
const option = {
  legend: {
    data: ["余料", "钢丝余料", "出料", "用料"],
    bottom: "0",
    itemGap: 20,
    itemWidth: 8,
    itemHeight: 8,
    textStyle: {
      color: "rgba(255, 255, 255, 0.70)",
      fontSize: 14,
    },
  },
  grid: {
    left: "1%",
    right: "1%",
    bottom: "14%",
    top: "5%",
    containLabel: true,
  },
  tooltip: {
    show: "true",
    trigger: "item",
    backgroundColor: "rgba(0,0,0,0.7)", // 背景
    padding: [8, 10], 
    extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4); color: white;", //添加阴影并设置文字颜色为白色
    formatter: function (params) {
      return params.name + "<br>" + params.seriesName + " ： " + params.value;
    },
  },
  yAxis: {
    type: "value",
    interval: 50,
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: "#363e83",
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255, 0.15)",
      },
    },
    axisLabel: {
      textStyle: {
        color: "#fff",
        fontWeight: "normal",
      },
    },
  },
  xAxis: [
    {
      type: "category",
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.30)",
        },
      },
      axisLabel: {
        inside: false,
        textStyle: {
          color: "#fff",
          fontWeight: "normal",
          fontSize: 14,
        },
        // formatter:function(val){
        //     return val.split("").join("\n")
        // },
      },
      data: ["1月", "2月", "3月", "4月", "5月"],
    },
    {
      type: "category",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      data: ["1月", "2月", "3月", "4月", "5月"],
    },
  ],
  series: [
    {
      type: "bar",
      xAxisIndex: 1,
      zlevel: 1,
      itemStyle: {
        normal: {
          color: "rgba(70, 203, 240, 0.3)",
          borderWidth: 0,
          shadowBlur: {
            shadowColor: "rgba(70, 203, 240, 0.3)",
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 2,
          },
        },
      },
      barWidth: "10",
      data: [100, 100, 100, 100, 100, 100],
    },
    {
      type: "bar",
      xAxisIndex: 1,
      barGap: "40%",
      data: [100, 100, 100, 100, 100, 100],
      zlevel: 1,
      barWidth: "10",
      itemStyle: {
        normal: {
          color: "rgba(255, 194, 0, 0.3)",
          borderWidth: 0,
          shadowBlur: {
            shadowColor: "rgba(255, 194, 0, 0.3)",
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 2,
          },
        },
      },
    },
    {
      type: "bar",
      xAxisIndex: 1,
      barGap: "40%",
      data: [100, 100, 100, 100, 100, 100],
      zlevel: 1,
      barWidth: "10",
      itemStyle: {
        normal: {
          color: "rgba(0, 208, 144, 0.3)",
          borderWidth: 0,
          shadowBlur: {
            shadowColor: "rgba(0, 208, 144, 0.3)",
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 2,
          },
        },
      },
    },
    {
      type: "bar",
      xAxisIndex: 1,
      barGap: "40%",
      data: [100, 100, 100, 100, 100, 100],
      zlevel: 1,
      barWidth: "10",
      itemStyle: {
        normal: {
          color: "rgba(0, 208, 144, 0.3)",
          borderWidth: 0,
          shadowBlur: {
            shadowColor: "rgba(0, 208, 144, 0.3)",
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 2,
          },
        },
      },
    },
    {
      name: "余料",
      type: "bar",
      itemStyle: {
        normal: {
          show: true,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#46CBF0",
            },
            {
              offset: 1,
              color: "#28758A",
            },
          ]),
          borderWidth: 0,
        },
      },
      zlevel: 2,
      barWidth: "10",
      data: [33, 23, 74, 67, 89, 35],
    },
    {
      name: "钢丝余料",
      type: "bar",
      barWidth: "10",
      itemStyle: {
        normal: {
          show: true,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0.6,
              color: "#FFC200",
            },
            {
              offset: 1,
              color: "#997400",
            },
          ]),
          borderWidth: 0,
        },
      },
      zlevel: 2,
      barGap: "40%",
      data: [59, 45, 63, 35, 76, 54],
    },
    {
      name: "出料",
      type: "bar",
      barWidth: "10",
      itemStyle: {
        normal: {
          show: true,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0.8,
              color: "#00D090",
            },
            {
              offset: 1,
              color: "#006A49",
            },
          ]),
          borderWidth: 0,
        },
      },
      zlevel: 2,
      barGap: "40%",
      data: [33, 23, 84, 67, 89, 35],
    },
    {
      name: "用料",
      type: "bar",
      barWidth: "10",
      itemStyle: {
        normal: {
          show: true,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0.8,
              color: "#C0D9FF",
            },
            {
              offset: 1,
              color: "#C0D9FF",
            },
          ]),
          borderWidth: 0,
        },
      },
      zlevel: 2,
      barGap: "40%",
      data: [38, 60, 84, 47, 59, 95],
    },
  ],
};

// 初始化图表
const initChart = () => {
  if (chart) {
    chart.dispose();
  }
  chart = echarts.init(chartRef.value);
  chart.setOption(option);
};

// 处理窗口大小变化
const handleResize = () => {
  chart && chart.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  chart && chart.dispose();
  window.removeEventListener("resize", handleResize);
});
</script>
        
    <style scoped lang="scss">
.chart-container {
  margin-top: 11px;
  .chart {
    width: 338px;
    height: 190px;
  }
}
</style>
        